<template>
  <div>
    <div class="post-success">
    	<div class="icon-wrap"></div>
    	<div class="success-text">
    		<div class="success">信息已成功发布！</div>
    		<div class="msg">已将货品信息展示给卖家</div>
    		<div class="success-list">
    			<div class="list-post">
    				<a class="post-a" @click="viewImmediately">
	    				<i class="icon check"></i>
	    				<span>立即查看</span>
    				</a>
    			</div>
    			<div class="list-post">
    				<router-link :to="{name: 'trade'}" class="post-a" >
	    				<i class="icon home"></i>
	    				<span>供求首页</span>
    				</router-link>
    			</div>
    			<div class="list-post">
    				<a class="post-a" @click="direct">
	    				<i class="icon next"></i>
	    				<span>再发一条</span>
    				</a>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- <div class="auth-wrapper">
    	<div class="auth-text">
    		<div class="line-one">供应信息已用尽，您已不能发布信息！</div>
    		<div class="line-two">立即认证继续发布信息</div>
    	</div>
    	<div class="auth-btn">
    		<i class="auth-icon"></i>
    		<span>去认证</span>
    	</div>
    </div> -->
    <div class="recommend-wrapper">
    	<div class="supply-list-wrap" v-if="lastPostType === 'supply'">
				<div class="list-tittle vux-1px-b">
  					<div class="tittle-lm">
  						<i class="supply-lm-icon"></i>
  						<span>供应</span>
  					</div>
  				</div>
				<div v-if="supplyloading == true && supplyStatus === 'loading'" class="load_wrap" >
					<i class="fa fa-spinner fa-pulse"></i>
					数据加载中...
				</div>
				<div v-else-if="supplyStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
					<i class="fa fa-frown-o"></i>
					加载失败，点击刷新
				</div>
				<div class="supply-list-item vux-1px-b" v-for="(data,index) in supplyList" v-else>
					<a :href="'#/trade/supply/' + data.id ">
						<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
						<div class="item-ifo">
							<div class="ifo-wrap">
								<div class="ifo-wrap-cell">
									<div class="goods-msg clearfix">
										<div class="goods-name ellipsis-2">
											<i class="pre-label" v-show="data.sale_type==2">预售</i>
											<span class="name">{{data.kind_name}}{{data.title}}</span>
										</div>
										<div class="goods-price">
											<div class="pre-date ellipsis" v-if="data.sale_type==2">
												<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
											</div>
											<div class="price" v-else>
												<label v-if="data.price_type==2" class="face">面议</label>
												<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
											</div>
										</div>
									</div>
									<div class="goods-from">
										<div class="goods-address ellipsis">
											<i class="address-icon"></i>
											<span>{{data.province_name}}</span>
											<span>{{data.city_name}}</span>
										</div>
										<div class="goods-size">
											<label v-if="data.size_unit_name">
												<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
											</label>
											<label v-else>规格不限</label>
										</div>
									</div>
									<div class="goods-seller">
										<div class="seller">
											<label class="name ellipsis">
												<span v-if="data.verify_classify" >{{data.verify_name}}</span>
												<span v-else>{{data.contact_name}}</span>
											</label>
											<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
											<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
											<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
											<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
											<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
											<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
											<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
											<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
										</div>
										<div class="data ellipsis">{{data.updated_view}}</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="demand-list-wrap" v-else>
				<div class="list-tittle vux-1px-b">
					<div class="tittle-lm">
						<i class="demand-lm-icon"></i>
						<span>求购</span>
					</div>
				</div>
				<div v-if="demandloading == true && demandStatus === 'loading'" class="load_wrap" >
					<i class="fa fa-spinner fa-pulse"></i>
					数据加载中...
				</div>
				<div v-else-if="demandStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
					<i class="fa fa-frown-o"></i>
					加载失败，点击刷新
				</div>
				<div class="demand-list-item" v-for="(data,index) in demandList" v-else>
					<a :href="'#/trade/demand/' + data.id ">
	  					<div class="buy-wraper line-one">
	  						<div class="buy-name ellipsis">{{data.kind_name}}</div>
	  						<div class="buy-stone ellipsis">求购：<big>{{data.stock}}</big><span>斤</span></div>
	  					</div>
	  					<div class="buy-wraper line-two">
	  						<div class="buy-address ellipsis">
	  							<label class="address-wrapper ellipsis">
		  							<i class="address-icon"></i>
									<span>{{data.province_name}}</span>
									<span>{{data.city_name}}</span>
								</label>
								<label class="wl" v-show="data.logistics===1">
									<i class="wl-car"></i>
									<span>物流</span>
								</label>
	  						</div>
	  						<div class="buy-size ellipsis">规格：
	  							<label v-if="data.size_unit_name"><span>{{data.size_min}}</span>-<span>{{data.size_max}}</span><span>{{data.size_unit_name}}</span></label>
	  							<label v-else>不限</label>
	  						</div>
	  					</div>
	  					<div class="buy-wraper line-three">
	  						<div class="buy-autor">
	  							<label class="name ellipsis">
	  								<span v-if="data.verify_classify" v-text="data.verify_name"></span>
	  								<span v-else v-text="data.contact_name"></span>
	  							</label>
								<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
								<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
								<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
								<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
								<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
								<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
								<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
								<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
	  						</div>
	  						<div class="buy-time ellipsis">{{data.updated_view}}</div>
	  					</div>
	  					<div class="buy-requirement ellipsis" v-if="data.desc_tag.length || data.desc">
	  						具体要求：
							<span v-for="tab in data.desc_tag">{{tab}}</span>
							<label>{{data.desc}}</label>
	  					</div>
	  				</a>
				</div>
			</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      supplyList:[],
      supplyloading:true,
      supplyStatus:"loading",
      demandList:[],
      demandloading:true,
      demandStatus:"loading",
      message: '已将货品信息展示给卖家',
    }
  },
  mounted(){
    this.setMessgae()
  	axios.get('/api/trade/index/getSupplyList').then(ret => {
	    	this.supplyList = ret.data.resp_data;
	    	this.supplyloading =false
	    	}, function (err) {
	        this.supplyloading =false;
	        this.supplyStatus="error"
	    });
	  axios.get('/api/trade/index/getDemandList').then(ret => {
    	this.demandList = ret.data.resp_data;
	    this.demandloading =false
	    }, function (err) {
        this.demandloading =false;
        this.demandStatus="error"
	    });
  },
  methods:{
    viewImmediately() {
      if(this.lastPostType === 'supply') {
        this.$router.push({ name: 'supplyDetail', params: { id: this.lastPostId }})
      }else {
        this.$router.push({ name: 'demand', params: { id: this.lastPostId }})
      }
    },
    setMessgae() {
      if(this.lastPostType === 'supply') {
        this.message = '已将货品信息展示给买家'
      }else {
        this.message = '已将求购信息展示给卖家'
      }
		},
		direct() {
			if(this.lastPostType === 'supply') {
        this.$router.push({ name: 'suppliesBoardFishes'})
      }else {
        this.$router.push({ name: 'demandsBoardFishes'})
      }
		}
  },
  computed:{
    lastPostId() {
      return this.$store.state.posts.lastPostId
    },
    lastPostType() {
      return this.$store.state.posts.lastPostType
    }
  },
  watch: {
    lastPostType(v) {
      this.setMessgae()
    }
  }
}
</script>

<style>
@import url("../../../../styles/common/trade/trade-common.css");
@import url("../../../../styles/common/trade/trade-index.css");
  .post-success{width: 100%;height:240px;background:#008cf0;color: #fff;}
  .post-success .icon-wrap{width: 80px;height: 80px;background:url(../../../../static/trade-img/fabujiaoyi-yes.png) no-repeat center center/cover;
  background-size:80px 80px; margin:0 auto; padding: 15px;}
  .success-text{width: 100%; height: 50px;text-align: center;}
  .success-text .success{height: 30px;line-height: 30px; font-size: 18px; font-weight: 600;}
  .success-text .msg{height: 20px;line-height: 20px; font-size: 16px;}
  .success-list{height:45px;padding:20px 10px 10px 10px;display: flex;}
  .list-post{flex:1;border: 1px solid #fff;border-radius: 3px;margin: 0 4px;}
  .list-post .post-a{display: block;color: #fff;padding:3px 0 3px 4px;line-height:35px;font-size: 14px;text-align: left;}
  .list-post .post-a .icon{display:inline-block;width:25px;height: 25px;vertical-align:top;margin-top: 5px;}
  .list-post .post-a .check{background:url(../../../../static/trade-img/ReleaseDeal-chakan.png) no-repeat center center/cover;
  background-size:25px 25px;}
  .list-post .post-a .home{background:url(../../../../static/trade-img/ReleaseDeal-home.png) no-repeat center center/cover;
  background-size:25px 25px;}
  .list-post .post-a .next{background:url(../../../../static/trade-img/ReleaseDeal-send.png) no-repeat center center/cover;
  background-size:25px 25px;}
  .auth-wrapper{padding:20px 10px;height: 45px;display: flex;}
  .auth-text{width: 75%;flex: 0 0 75%;height: 45px;}
  .auth-text .line-one{width: 100%;height:20px;line-height: 20px; color: #999;font-size: 14px;}
  .auth-text .line-two{width: 100%;height:25px;line-height: 25px; color: #ff8b17;font-size: 16px;}
  .auth-btn{width: 20%;padding:0 3px;height:32px;background: #ff8b17;flex: 1;margin-top: 6px;border-radius: 3px;line-height: 32px;color:#fff;font-size: 15px;}
  .auth-btn .auth-icon{display: inline-flex;width: 20px;height: 20px;background:url(../../../../static/trade-img/renzheng.png) no-repeat center center/cover;
  background-size:20px 20px;padding: 6px 0;vertical-align:top;}
	.supply-list-item {
		background: #fff;
	}
</style>
